<template>
	<view class="container">
	
		<view class="cont_box">
			<view class="user_detail_item" v-if="userInfo.token">
				<view class="">
					<u-avatar :src="userInfo.avatarUrl" size='60' shape="circle"></u-avatar>
				</view>
				<view class="user_desc">
					<view class="user_name">
						{{userInfo.nickName}}
					</view>
					<view class="user_phone">
						{{formattedPhone}}
					</view>
					<view class="user_set" @click="detailfn">
						编辑资料<span class="iconfont icon-youjiantou"></span>
					</view>
				</view>
			</view>
			<view class="user_detail_item" v-else @click="login">
				<view class="">
					<u-avatar
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
						size='60' shape="circle"></u-avatar>
				</view>
				<view class="user_desc">
					<view class="user_name">
						点击登录
					</view>

				</view>
			</view>
			<view class="points">
				<view class="points_title">
					<view class="points_title_name">
						我的积分
					</view>
					<view class="points_title_a" @click="consumptionfn">
						消费记录
					</view>
				</view>
				<view class="points_detail">
					<view class="points_detail_balance">
						<view class="points_detail_title">
							当前可用积分
						</view>
						<view class="points_detail_math">
							{{userInfo.pointsNum?userInfo.pointsNum:0}}
						</view>
					</view>
					<view class="phints_but" @click="topupfn">
						立即充值
					</view>
				</view>
				<view class="points_desc">
					<view class="points_desc_item">
						<view class="points_desc_title">
							视频下载
						</view>
						<view class="points_desc_Instructions">
							5积分/次
						</view>
					</view>
					<view class="points_desc_item">
						<view class="points_desc_title">
							优先生成
						</view>
						<view class="points_desc_Instructions">
							15积分/次
						</view>
					</view>
				</view>
			</view>
			<view class="help">
				<view class="help_title">
					帮助与反馈
				</view>
				<view class="region" >
					<view class="region_item" @click="process">
						<view class="iconfont icon-xiaoxi">

						</view>
						<view class="">
							使用流程
						</view>
					</view>
					<view class="region_item" @click="region">
						<view class="iconfont icon-wentifankui">

						</view>
						<view class="">
							问题反馈
						</view>
					</view>
				</view>
			</view>
		</view>
		<layout />
	</view>
</template>

<script>
	import {
		judgetoken
	} from '../../utils/utils.js'
	import layout from '../../components/layout/layout.vue'
	export default {
		data() {
			return {
				userInfo: {},
			
			};
		},
		components: {
			layout
		},
		onload() {},
		created() {
			this.userInfo = uni.getStorageSync('digital_aI_key')
			this.detailinfo()
		},
		computed: {
			formattedPhone() {
				const phone = this.userInfo.phone;
				return phone ? `${phone.slice(0, 3)}****${phone.slice(7)}` : '';
			}
		},
		mounted() {

			uni.$emit('update', {
				active: 3
			}) // 触发事件并传递参数	
		},
		watch: {

		},
		methods: {
			login() {
				uni.showLoading({
					title: "登录中...",
					mask: true
				});
				const that = this;
				// 登录api进行登录
				uni.login({
					provider: 'weixin',
					success: res => {
						// 用户唯一code码
						const code = res.code
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: res => {
								that.userInfo = res.userInfo
								// 拿到用户信息进行存储
								const data = {
									code: code,
									nickName: res.userInfo.nickName,
									avatarUrl: res.userInfo.avatarUrl
								}
								//发送请求将用户信息存储后台
								that.$request(`/wechat/getAccountByCode`, 'post', data)
									.then(
										res => {
											const dataobj = {
												token: res.data.data.token,
												...res.data.data.user
											}
											uni.setStorage({
												key: 'digital_aI_key',
												data: dataobj,
												success: function() {
													that.userInfo = dataobj
													that.detailinfo()
													uni.hideLoading();
													uni.showToast({
														title: '登录成功',
														icon: 'success',
													});
												}
											});

										})
							},
							fail: err => {
								console.error('获取用户信息失败！' + JSON.stringify(err))
							}
						})
					},
					fail: err => {
						console.error(JSON.stringify(err))
					}
				})
			},
			detailinfo(e) {
				const that = this
				this.$request(`/mine/memberInfo`, 'get').then(
					res => {
						console.log(res);
						this.userInfo.pointsNum = res.data.data.pointsNum
						uni.setStorage({
							key: 'digital_aI_key',
							data: that.userInfo,

						});
					})
			},

			topupfn() {
				if(!judgetoken()){
					return
				}
				uni.navigateTo({
					url: '/subpackage/points/points_recharge',
				});
			},
			consumptionfn() {
				if(!judgetoken()){
					return
				}
				uni.navigateTo({
					url: '/subpackage/points/points_consume',
				});
			},
			detailfn() {
				const that = this
				uni.navigateTo({
					url: '/subpackage/userdetail/user_detail',
					events: {
						messageData: (data) => {
							if (data.data) {
								that.userInfo = uni.getStorageSync('digital_aI_key')
							}
						},
					},
				});
			},
			region() {
				uni.navigateTo({
					url: '/subpackage/feedback/feedback',
				});
			},
			process() {
				uni.navigateTo({
					url: '/subpackage/process/process',
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.cont_box {
		height: calc(100vh - 50px);
		background-color: #f9fafb;
		// padding: 15px;
		overflow: auto;

		.user_detail_item {
			height: 140px;
			background: linear-gradient(135deg, #f97316 0%, #fd6220 100%);
			display: flex;
			padding: 0 24px;
			align-items: center;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				width: 120px;
				height: 120px;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
				border-radius: 50%;
				transform: translate(40%, -40%);
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 80px;
				height: 80px;
				background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
				border-radius: 50%;
				transform: translate(-30%, 30%);
			}



			>view:first-child {
				position: relative;
				z-index: 1;

				.u-avatar {
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
					transition: transform 0.3s ease;

					.user_detail_item:hover & {
						transform: scale(1.05);
					}
				}
			}

			.user_desc {
				margin-left: 20px;
				color: #fff;
				position: relative;
				z-index: 1;

				.user_name {
					font-weight: 700;
					font-size: 34rpx;
					letter-spacing: 0.5px;
					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				}

				.user_phone {
					font-size: 26rpx;
					margin: 6px 0 10px;
					opacity: 0.9;
					letter-spacing: 0.3px;
				}

				.user_set {
					font-size: 27rpx;
					font-weight: 600;
					display: flex;
					align-items: center;
					transition: transform 0.3s ease;
					cursor: pointer;
					padding: 2px 10px;
					border-radius: 20px;
					background: rgba(255, 255, 255, 0.15);
					backdrop-filter: blur(10px);



					.icon-youjiantou {
						margin-left: 6px;
						font-size: 24rpx;
						transition: transform 0.3s ease;

						.user_set:hover & {
							transform: translateX(2px);
						}
					}
				}
			}

			/* 未登录状态特殊样式 */
			&[v-else] {
				cursor: pointer;


				.user_desc {
					.user_name {
						font-size: 36rpx;
						font-weight: 700;
						letter-spacing: 1px;
						text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
					}
				}
			}
		}

		.points {
			margin: 15px;
			padding: 20px;
			background-color: #ffffff;
			border-radius: 18px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s ease, box-shadow 0.3s ease;

			.points_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 16px;
				border-bottom: 1px solid #f0f0f0;

				.points_title_name {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: -10px;
						top: 50%;
						transform: translateY(-50%);
						width: 4px;
						height: 24rpx;
						background-color: #f97316;
						border-radius: 2px;
					}
				}

				.points_title_a {
					color: #4387f6;
					font-size: 28rpx;
					font-weight: 600;
					display: flex;
					align-items: center;
					transition: color 0.3s ease;

					&::after {
						content: '→';
						font-size: 20rpx;
						margin-left: 4px;
						transition: transform 0.3s ease;
					}
				}
			}

			.points_detail {
				margin: 16px 0;
				padding: 0 20px;
				background-color: #fff6ec;
				border-radius: 12px;
				display: flex;
				min-height: 100px;
				justify-content: space-between;
				align-items: center;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 80px;
					height: 80px;
					background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), transparent);
					border-radius: 50%;
					transform: translate(40%, -40%);
				}

				.points_detail_balance {
					position: relative;
					z-index: 1;

					.points_detail_title {
						font-size: 26rpx;
						color: #738093;
						letter-spacing: 0.5px;
					}

					.points_detail_math {
						margin-top: 12px;
						font-size: 40rpx;
						font-weight: 700;
						color: #f97316;
						letter-spacing: 1px;
						animation: pointsPulse 2s infinite;
					}
				}

				.phints_but {
					background: linear-gradient(135deg, #f97316, #fd6220);
					width: 100px;
					height: 38px;
					line-height: 38px;
					text-align: center;
					border-radius: 22px;
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.3s ease;
					position: relative;
					z-index: 1;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
						transition: all 0.6s ease;
					}

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);

						&::before {
							left: 100%;
						}
					}

					&:active {
						transform: translateY(0);
					}
				}
			}

			.points_desc {
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-top: 1px solid #f0f0f0;
				margin-top: 8px;

				.points_desc_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 12px;
					border-radius: 8px;
					transition: background-color 0.3s ease;

					&:hover {
						background-color: #f9fafb;
					}

					.points_desc_title {
						font-size: 26rpx;
						color: #6b7280;
						margin-bottom: 8px;
						font-weight: 500;
					}

					.points_desc_Instructions {
						font-size: 30rpx;
						font-weight: 600;
						color: #f97316;
						background-color: rgba(249, 115, 22, 0.1);
						padding: 4px 12px;
						border-radius: 16px;
					}
				}
			}

			@keyframes pointsPulse {

				0%,
				100% {
					transform: scale(1);
				}

				50% {
					transform: scale(1.02);
				}
			}
		}

		.help {
			margin: 15px;
			padding: 20px;
			background-color: #ffffff;
			border-radius: 18px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s ease, box-shadow 0.3s ease;


			.help_title {
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
				position: relative;
				padding-left: 12px;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 4px;
					height: 24rpx;
					background-color: #4387f6;
					border-radius: 2px;
				}
			}

			.region {
				margin-top: 24px;
				display: flex;
				justify-content: space-between;
				gap: 16px;

				.region_item {
					flex: 1;
					height: 100px;
					background-color: #f8fafc;
					border-radius: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					transition: all 0.3s ease;
					cursor: pointer;
					position: relative;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
						transition: all 0.6s ease;
					}



					.iconfont {
						font-size: 52rpx;
						margin-bottom: 12px;
						transition: transform 0.3s ease;

						.region_item:hover & {
							transform: scale(1.1);
						}
					}

					.icon-xiaoxi {
						color: #4387f6;
						background: linear-gradient(135deg, #4387f6, #2563eb);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-wentifankui {
						color: #8b5cf6;
						background: linear-gradient(135deg, #8b5cf6, #7c3aed);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					&>view {
						font-size: 28rpx;
						font-weight: 600;
						color: #4b5563;
					}
				}
			}
		}
	}
</style>